<template>
  <div>
    <el-header>
      <h1>
        <img
          src="https://www.escook.cn/vue-shop/img/heima.b5a855ee.png"
          alt=""
        />
      </h1>
      <h2>
        <span class="zhi">电商后台管理系统</span>
      </h2>
      <div class="dianwei">
        <div class="user">
          <span>你好！{{ getUsername }} </span>
        </div>
        <el-row>
          <el-button type="info" @click="logout">退出</el-button>
        </el-row>
      </div>
    </el-header>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {};
  },

  // created(){
  // this.titles =  mapGetters.getUsername()
  // },
  computed: {
    ...mapGetters(["getUsername"]),
  },
  methods: {
    myMessage(type,text){
      this.$message({
        type,
        message:text
      })
    },
    // 退出按钮
    // logout() {
    //   // 点击是提示用户是否要退出 如果是否  什么也不做

    //   this.$confirm("是否要退出登录?", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "退出成功!",
    //       });
    //       // 并清空本地缓存的username
    //       this.$store.commit("getClone");
    //       // 如果是真的要退出 发送退出请求 跳转到登录页面
    //       this.$router.push({ path: "/Login" });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消退出",
    //       });
    //     });
    // },
    // 方法二
  async logout() {
      // 点击是提示用户是否要退出 如果是否  什么也不做

    let res = await this.$confirm("是否要退出登录?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(()=>{})
      if(res !="confirm") return this.myMessage("info","已取消退出")
          this.myMessage("success","退出成功!")
          // 并清空本地缓存的username
          this.$store.commit("getClone");
          // 如果是真的要退出 发送退出请求 跳转到登录页面
          this.$router.push({ path: "/Login" });
        // .catch(() => {
        //   this.$message({
        //     type: "info",
        //     message: "已取消退出",
        //   });
        // });
    },
  },
};
</script>

<style scoped lang='css'>
.el-header,
.el-footer {
  background-color: #373d41;
  color: #333;
  text-align: center;
  line-height: 60px;
  min-width: 800px;
}
.el-header {
  display: flex;
}
.zhi {
  margin-left: 15px;
  font-size: 24px;

  color: white;
}
.dianwei {
  display: flex;
  position: absolute;
  right: 20px;
}
.user {
  color: white;
  margin-right: 10px;
}
</style>